<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>商品详情</title>
		<link rel="stylesheet" type="text/css" href="../css/index.css" />
		<script type="text/javascript" src="../js/vue.min.js"></script>
		<script type="text/javascript" src="../js/vant.min.js"></script>
		<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>
		<script src="html5plus://ready"></script>
		<script src="../js/listener_other.js"></script>
		<script src="../js/ajax.js"></script>
		<style type="text/css">
			.imgs {
				width: 100%;
				height: 50%;
			}

			.images {
				width: 100%;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<header>
				<van-nav-bar title="商品详情" left-text="" left-arrow @click-left="onClickLeft"></van-nav-bar>
			</header>
			<section>
				<van-row>
					<van-col span="24">
						<van-swipe :autoplay="2000" indicator-color="white">
							<van-swipe-item v-for="(img, index) in images" :key="index">
								<img class="imgs" v-lazy="img" />
							</van-swipe-item>
						</van-swipe>
					</van-col>
					<van-col span="24">
						<van-cell-group>
							<van-cell :title="Name" value="" :label="'￥'+money"></van-cell>
							<van-col span="12">
								<van-cell title="" value="" label="快递:免运费"></van-cell>
							</van-col>
							<van-col span="12">
								<van-cell title="" value="" :label="'销量'+number"></van-cell>
							</van-col>
						</van-cell-group>
					</van-col>
					<van-cell style="background-color: #F3F3F6;">
						<van-col class="vol-class" span="8">☞正品保证</van-col>
						<van-col class="vol-class" span="8">☞极速退款</van-col>
						<van-col class="vol-class" span="8">☞两天内发货</van-col>
					</van-cell>
					<van-panel title="商品详情">
						<img v-for="img in images" v-lazy="img" class="images" onerror="javascript:this.src='../img/yjz.jpg';">
					</van-panel>
				</van-row>
			</section>
			<footer>
				<van-goods-action>
					<van-goods-action-mini-btn v-show="isCollected" style="width: 25%;" icon="like" text="已收藏" @click="cancelCollect"></van-goods-action-mini-btn>
					<van-goods-action-mini-btn v-show="!isCollected" style="width: 25%;" icon="like-o" text="收藏" @click="joinCollection"></van-goods-action-mini-btn>
					<van-goods-action-big-btn @click="joinCar" v-if="shopcount==0">加入购物车</van-goods-action-big-btn>
					<van-goods-action-big-btn v-else @click="joinCar">加入购物车X<span v-text="shopcount"></span></van-goods-action-big-btn>
					<van-goods-action-big-btn primary text="立即购买" @click="goShopping"></van-goods-action-big-btn>
				</van-goods-action>
			</footer>
		</div>
		<script>
			Vue.use(VueLazyload, {
				error: "../img/yjz.jpg"
			});
			var key = localStorage.getItem("key");
			var Gid = plus.webview.currentWebview().shopId;
			var vm = new Vue({
				el: "#app",
				data: {
					isCollected: false,
					images: [],
					shopcount: 0,
					pid:0,
					Name: "",
					phone: "",
					money: "",
					number: "",
					Details: "",
				},
				methods: {
					joinCar: function() {
						if (key == null) {
							plus.webview.create("../personcenter/denglu.html", "denglu").show();
						} else {
							vm.$toast.success("加入购物车");
							vm.phone = localStorage.getItem("Phone");
							var goodsArr = [{
								goodsId: vm.Details.Id,
								buyCount: 1
							}];
							var goodsObj = {
								goodsId: vm.Details.Id,
								buyCount: 1
							};
							var newArr;
							if (localStorage.getItem(vm.phone) == null) {
								localStorage.removeItem(vm.phone);
								localStorage.setItem(vm.phone, JSON.stringify(goodsArr));
								vm.shopcount = 1;
							} else {
								newArr = JSON.parse(localStorage.getItem(vm.phone));
								for (var i = 0; i < newArr.length; i++) {
									if (newArr[i].goodsId == vm.Details.Id) {
										newArr[i].buyCount += 1;
										localStorage.removeItem(vm.phone);
										localStorage.setItem(vm.phone, JSON.stringify(newArr));
										vm.shopcount = newArr[i].buyCount;
										return;
									}
								}
								newArr.push(goodsObj);
								localStorage.removeItem(vm.phone);
								localStorage.setItem(vm.phone, JSON.stringify(newArr));
								vm.shopcount = 1;
							}
							plus.webview.getWebviewById("shopping").reload(true);
						}
					},
					joinCollection: function() {
						if (key == null) {
							plus.webview.create("../personcenter/denglu.html", "denglu").show();
						} else {
							ajax({
								url: "http://dsapi.ysd3g.com/API/CollectGoods",
								dataType: "jsonp",
								data: {
									key: key,
									goodsId: vm.Details.Id
								},
								success: function(res) {
									if (!res.Error) {
										vm.$toast.success('收藏成功');
										vm.isCollected = true;
									} else {
										vm.$toast.success(res.Msg);
									}
								}
							});
						}
					},
					cancelCollect: function() {
						var key = localStorage.getItem("key");
						ajax({
							url: "http://dsapi.ysd3g.com/api/cancelCollectGoods",
							dataType: "jsonp",
							data: {
								key: key,
								goodsId: vm.Details.Id,
							},
							success: function(res) {
								if (!res.Error) {
									vm.$toast.success('取消收藏');
									vm.isCollected = false;
								} else {
									vm.$toast.fail(res.Msg);
								}
							}
						});
					},

					onClickLeft: function() {
						plus.webview.close(plus.webview.currentWebview().id);
					},
					goShopping:function() {
						//立即购买
						if (key == null) {
							plus.webview.create("../personcenter/denglu.html", "denglu").show();
						} else {
							plus.webview.create("../shopknow/jiesuan.html", "jiesuan", {}, {
								pid:this.pid,
								isShow: true,
								address: true
							}).show();
						}
					},
				},
				mounted: function() {
					ajax({
						url: "http://dsapi.ysd3g.com/API/GoodsDetail",
						dataType: "jsonp",
						data: {
							gId: Gid,
						},
						success: function(res) {
							vm.images = res.Detail.SwipeImages;
							vm.Name = res.Detail.Name;
							vm.money = res.Detail.MarketPrice;
							vm.number = res.Detail.SaleCount;
							vm.Details = res.Detail;
						}
					});
					if (localStorage.getItem("key") != null) { //如果key值不为空查看是否已收藏
						ajax({
							url: "http://dsapi.ysd3g.com/API/MyGoodsCollectList",
							dataType: "jsonp",
							data: {
								p: 1,
								key: localStorage.getItem("key")
							},
							success:function(res) {
								for (var i = 0; i < res.Data.length; i++) {
									if (res.Data[i].GoodsId == Gid) {
										vm.isCollected = true;
									}
								}
							}
						})
					}
					var spg = localStorage.getItem("Phone"); //购物车内的商品
					var shopcartGoods = localStorage.getItem(spg);
					if (shopcartGoods != null) {
						for (var i = 0; i < shopcartGoods.length; i++) { //遍历购物车
							if (shopcartGoods[i].goodsId == Gid) { //如果购物车里面有此商品
								this.addShopcartCount = shopcartGoods[i].buyCount;
							}
						}
					}
				}



			})
		</script>

	</body>
</html>
